<!DOCTYPE html>
<html lang="en">
<head>
    <title> DDU Img Bed </title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            background: #222;
            overflow: hidden;
            width: 100%;
            height: 100%;
            font-family: "Source Code Pro", serif;
        }

        p {
            font-size: 16px;
        }


        .boxInLine {
            display: inline
        }

        div.background {
            background-image: url('JH9R-hqzxptn4703740.gif');
            background-size: 100%, 100%;
            background-repeat: repeat-y;
            position: absolute;
            width: 100%;
            height: 100%;
            padding-top: 106px
        }

        div.progressBarZone p {
            margin: 0;
            position: absolute;
            border-radius: 4px;
            border: 2px solid rgba(18, 20, 19, 0.39);
            font-size: 39px;
            top: 16%;
            left: 50%;
            animation-duration: 2s;
            animation-name: changeColor;
            animation-iteration-count: infinite;
            margin-right: -50%;
            box-shadow: 10px 10px 5px #888888;
            transform: translate(-50%, -50%)

        }

        @keyframes changeColor {
            0% {
                border-color: #1C50A8;
                background: #1C50A8;
            }
            24% {
                border-color: #1C50A8;
                background: #1C50A8;
            }
            25% {
                border-color: white;
                background: #a8fff5;
            }
            100% {
                border-color: white;
                background: #1C5011;

            }
        }

        .view {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-perspective: 400;
            perspective: 400;
        }


        .Touch_left {
            background: #464646;
            border: 2px solid #370a99;
            border-radius: 3px;
            animation-name: sml;
            font-size: 26px;
            text-align: center;
            width: 200px;
            height: 88px;
            z-index: 100000;
            animation-duration: 1ms;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }

        .Touch_right {
            background: #464646;
            border: 2px solid #370a99;
            border-radius: 3px;
            animation-name: smr;
            width: 200px;
            font-size: 26px;
            text-align: center;
            height: 88px;
            z-index: 100000;
            animation-duration: 8s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }

        @keyframes smr {
            from {
                opacity: 1;
            }
            to {
                opacity: 1;
                transform: translateX(1px);
            }
            from {
                opacity: 1;
            }
            to {
                opacity: 1;
                transform: translateX(-200px);
            }
        }

        @keyframes sml {
            from {
                opacity: 1;
            }
            to {
                opacity: 1;
                transform: translateX(-200px);
            }
        }


        .show_url {
            position: relative;
            background: #888888;
            padding-top: 2px;
            width: 90%;
        }

        .copy_btn {

            display: inline-block;
            box-sizing: border-box;
            box-shadow: 0 0 60px crimson, inset 0 0 60px crimson;
            border-radius: 4px;
            border: 2px solid #1C50A8;
            position: absolute;
            background: blueviolet;
            width: 10%;
            right: 0;
        }

        .copy_btn:hover {
            box-sizing: border-box;
            box-shadow: 0 0 60px #5adc6f, inset 0 0 60px #4ad3dc;
            border-radius: 4px;
            border: 2px solid #1C50A8;
            position: absolute;
            background: #370a99;
            width: 10%;
            right: 0;
        }

        .plane {
            width: 120px;
            height: 120px;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .plane.main {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            -webkit-transform: rotateX(60deg) rotateZ(-30deg);
            transform: rotateX(60deg) rotateZ(-30deg);
            -webkit-animation: rotate 20s infinite linear;
            animation: rotate 20s infinite linear;
        }

        .plane.main .circle {
            width: 120px;
            height: 120px;
            position: absolute;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            border-radius: 100%;
            box-sizing: border-box;
            box-shadow: 0 0 60px crimson, inset 0 0 60px crimson;
        }

        .plane.main .circle::before, .plane.main .circle::after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 10%;
            height: 10%;
            border-radius: 100%;
            background: crimson;
            box-sizing: border-box;
            box-shadow: 0 0 60px 2px crimson;
        }

        .plane.main .circle::before {
            -webkit-transform: translateZ(-90px);
            transform: translateZ(-90px);
        }

        .plane.main .circle::after {
            -webkit-transform: translateZ(90px);
            transform: translateZ(90px);
        }

        .plane.main .circle:nth-child(1) {
            -webkit-transform: rotateZ(72deg) rotateX(63.435deg);
            transform: rotateZ(72deg) rotateX(63.435deg);
        }

        .plane.main .circle:nth-child(2) {
            -webkit-transform: rotateZ(144deg) rotateX(63.435deg);
            transform: rotateZ(144deg) rotateX(63.435deg);
        }

        .plane.main .circle:nth-child(3) {
            -webkit-transform: rotateZ(216deg) rotateX(63.435deg);
            transform: rotateZ(216deg) rotateX(63.435deg);
        }

        .plane.main .circle:nth-child(4) {
            -webkit-transform: rotateZ(288deg) rotateX(63.435deg);
            transform: rotateZ(288deg) rotateX(63.435deg);
        }

        .plane.main .circle:nth-child(5) {
            -webkit-transform: rotateZ(360deg) rotateX(63.435deg);
            transform: rotateZ(360deg) rotateX(63.435deg);
        }

        @-webkit-keyframes rotate {
            0% {
                -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }
            100% {
                -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }

        @keyframes rotate {
            0% {
                -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }
            100% {
                -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }


    </style>
</head>
<body>
<div id="Touch" class="Touch_left">Touch</div>
<div class="view">
    <div class="background">
        <div id="progressBarZone" class="progressBarZone">
            <p>Copy screen capture and drag image </p>
        </div>
    </div>
    <div class="plane main">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>

</body>

<script>
    var progressBarZone = document.getElementById('progressBarZone');
    var body_tag = document.body;

    function showImg(file, preview) {
        var reader = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
        }

        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = "";
        }
    }

    function sendFile(files, callback) {
        if (!files || files.length != 1) {
            return;
        }
        var percent = document.createElement('div');
        progressBarZone.appendChild(percent);

        var formData = new FormData();             // 创建一个表单对象FormData
        var fileNames = '';

        for (var i = 0; i < files.length; i++) {
            var file = files[i];    // file 对象有 name, size 属性

            formData.append('files', file);       // 往FormData对象添加File对象

            fileNames = '' + files[i].name + '';
        }

        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener('progress',
            function uploadProgress(evt) {
                // evt 有三个属性：
                // lengthComputable – 可计算的已上传字节数
                // total – 总的字节数
                // loaded – 到目前为止上传的字节数
                if (evt.lengthComputable) {
                    percent.innerHTML = fileNames + ' upload percent :' + Math.round((evt.loaded / evt.total) * 100) + '%';
                }
            }, false); // false表示在事件冒泡阶段处理
        xhr.upload.onload = function (r) {
            console.log(xhr.response)
            percent.innerHTML = fileNames + '上传完成,点击Copy即可。';
        };

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                callback(xhr.response);
            }
        }
        xhr.upload.onerror = function (e) {
            percent.innerHTML = fileNames + ' 上传失败。';
        };

        xhr.open('post', '/upload/image', true);
        xhr.send(formData);            // 发送表单对象。
    }
    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    function Copy(containerid) {
        var touch = document.getElementById("Touch")
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(containerid));
            range.select().createTextRange();
            document.execCommand("copy");
            touch.className = "Touch_right";
            touch.innerText = "text copied";
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById(containerid));
            window.getSelection().addRange(range);
            document.execCommand("copy");
            touch.className = "Touch_right";
            touch.innerText = "text copied";
        }
        setInterval(function () {
            touch.className="Touch_left"
        },8000);
    }

    function CreateDIV() {
        var UrlTempLate = document.createElement('div');
        UrlTempLate.style.fontSize = "20px";
        UrlTempLate.style.width = "80%";
        return UrlTempLate;
    }

    function DrawDiv(r, file) {

        var tempDom = CreateDIV();
        progressBarZone.appendChild(tempDom);

        var dom = document.createElement('img');
        dom.style.height = "200px";
        console.log("FileName ", file.name)
        showImg(file, dom);
        tempDom.appendChild(dom);


        let josnData = JSON.parse(r);
        let UID = guid();
        var newDom = CreateDIV();
        newDom.innerHTML = `<div class="boxInLine show_url" id=${UID}>${window.location}look_look/${josnData.data}</div> <div class="boxInLine copy_btn" onclick="Copy(\`${UID}\`)">Copy</div>`
        tempDom.appendChild(newDom);
        UID = guid();
        newDom = CreateDIV();
        newDom.innerHTML = `<div class="boxInLine show_url" id=${UID}>![请添加描述](${window.location}look_look/${josnData.data})</div> <div  class="boxInLine copy_btn" onclick="Copy(\`${UID}\`)">Copy</div>`
        tempDom.appendChild(newDom);
        console.log("Tag UUID" + UID)
    }

    document.addEventListener("dragover", function (e) {
        e.stopPropagation();
        e.preventDefault();            // 必须调用。否则浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。
    }, false);

    document.addEventListener('paste', function (event) {
        var items = (event.clipboardData || window.clipboardData).items;
        console.log(items);
        var files = new Array();
        if (items && items.length) {
            // 搜索剪切板items
            for (var i = 0; i < items.length; i++) {
                if (items[i].type.indexOf('image') !== -1) {
                    files.push(items[i].getAsFile());
                    break;
                }
            }
        }
        sendFile(files, function (r) {
            DrawDiv(r, files[0])
        });
    }, false);
    document.addEventListener("drop", function (e) {
        e.stopPropagation();
        e.preventDefault();            // 必须调用。否则浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。

        sendFile(e.dataTransfer.files, function (r) {
            DrawDiv(r, e.dataTransfer.files[0])
        });
    }, false);

    function guid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }
</script>
</html>